<template>
  <div class="stepOut">
    <div class="stepItem">
        <el-image class="stepItem_img" :src="stepInfo.status>=1?'http://small.jianchiyaoye.com/icon_xiadan_activate.png':'http://small.jianchiyaoye.com/icon_xiadan_default.png'"  alt=""></el-image>
        <p :class="stepInfo.status>=1?'blue':'gray'">买家下单</p>
        <p class="time">{{stepInfo.buyerPlaceOrderTime}}</p>
        <div :class="stepInfo.status>=1?'stepItem_xian lineAction':'stepItem_xian'"></div>
    </div>
     <div class="stepItem shenheStatus">
        <el-image class="stepItem_img"  :src="stepInfo.status>=2?'http://small.jianchiyaoye.com/icon_fukuan_activate.png':'http://small.jianchiyaoye.com/icon_fukuan_default.png'"  alt=""></el-image>
        <p :class="stepInfo.status>=2?'blue':'gray'">付款成功</p>
        <p class="time">{{stepInfo.paidTime}}</p>
        <div :class="stepInfo.status>=2?'stepItem_xian lineAction':'stepItem_xian'"></div>
        <div v-if="statustype==3"  class="close"></div>
      <!--  -->
    </div>
     <div class="stepItem">
        <el-image  class="stepItem_img" :src="stepInfo.status>=3&&stepInfo.status!='99'?'http://small.jianchiyaoye.com/icon_fahuo_activate.png':'http://small.jianchiyaoye.com/icon_fahuo_default.png'"  alt=""></el-image>
        <p :class="stepInfo.status>=3&&stepInfo.status!='99'?'blue':'gray'">商家发货</p>
        <p class="time">{{stepInfo.merchantShippingTime}}</p>
        <div :class="stepInfo.status>=3&&stepInfo.status!='99'?'stepItem_xian lineAction':'stepItem_xian'"></div>
    </div>
     <div class="stepItem">
        <el-image  class="stepItem_img" :src="stepInfo.status>=4&&stepInfo.status!='99'?'http://small.jianchiyaoye.com/icon_wancheng_activate.png':'http://small.jianchiyaoye.com/icon_wancheng_default.png'"  alt=""></el-image>
        <p :class="stepInfo.status>=4&&stepInfo.status!='99'?'blue':'gray'">交易完成</p>
        <p class="time">{{stepInfo.completeTransactionTime}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'steps',
  props: {
    // 传递步骤参数
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: []
        }
      }
    },
    statustype: {
      type: String

    }
  }
}
</script>

<style lang="scss" scoped>
.stepOut {
  display: flex;
  justify-content: center;
  .stepItem{
    width: 16%;
    height: 140px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 15px;
    .stepItem_img{
      width: 56px;
      height: 56px;
    }
    .stepItem_xian{
      position: absolute;
      left: 77%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed #CCCCCC;
    }
    .lineAction {
        border: 1px dashed #4C81EB
    }
    .blue{
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }
    .gray{
      font-size: 14px;
      font-weight: 400;
      color: #CCCCCC;
    }
    .time{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
  .shenheStatus{
    position: relative;
    .close {
      position: absolute;
      left: 77%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed red;
       &:before {
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            content: '';
            color: red;
            position:absolute;
             border: 3px solid #f5d3d9;
            left:45%;
            top:-7px;
            }
              &:after {
                width: 100%;
                content: '审核不通过';
                color: red;
                position:absolute;
                left:0%;
                top:-39px;
                font-size: 14px;
                font-weight: bold;
            }
    }
  }
}
@media screen and (max-width:1280px){
.stepOut {
  display: flex;
  justify-content: center;
  .stepItem{
    width: 16%;
    height: 140px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 15px;
    .stepItem_img{
      width: 48px !important;
      height: 48px !important;
    }
    .stepItem_xian{
      position: absolute;
      left: 77%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed #CCCCCC;
    }
    .lineAction {
        border: 1px dashed #4C81EB
    }
    .blue{
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }
    .gray{
      font-size: 14px;
      font-weight: 400;
      color: #CCCCCC;
    }
    .time{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
  .shenheStatus{
    position: relative;
    .close {
      position: absolute;
      left: 77%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed red;
       &:before {
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            content: '';
            color: red;
            position:absolute;
             border: 3px solid #f5d3d9;
            left:45%;
            top:-7px;
            }
              &:after {
                width: 100%;
                content: '审核不通过';
                color: red;
                position:absolute;
                left:0%;
                top:-39px;
                font-size: 14px;
                font-weight: bold;
            }
    }
  }
}
}
</style>
